<template>
	<view ref="tableItem" class="table-wrap" id="table-wrap">
		<view class="table-header-wrap" :style="isSticky ? sticky : {}">
			<slot name="head"></slot>
			<view class="table-header-box" >
				<view class="table-header-item" v-for="(val,cIndex) in columns" :key="cIndex"
					:style="{
						
						width:val.width ?  `${val.width}rpx` : `${itemWidth}rpx`,
						justifyContent: val.align || 'left'
				}">
					{{val.type == 'index' ? val.title || '序号' : val.title}}
				</view>
			</view>
		</view>
		
		
		<view class="table-body-box">
			<view class="table-box-item"
				v-for="(item,index) in dataList.slice(startIndex)"
				:key="index"
				:style="{
					backgroundImage:!isRanking ? defaultBgc : index < 3 ? rankingBgc : defaultBgc,
					height:rowHeight ? `${rowHeight}rpx` : '80rpx'
				}"
				@click="itemClick(item)"
			>
				<view class="table-item-box " 
					v-for="(val,cIndex) in columns" 
					:key="cIndex"
					:style="{
						color:val.color || '#000',
						width:val.width ?  `${val.width}rpx` : `${itemWidth}rpx`,
						justifyContent: val.align || 'left',
					}"
					@click="val.callback && val.callback(item)"
				>
					<!-- 序号 -->
					<view class="box-item-content" v-if="val.type == 'index'">
						<!-- 显示排名 -->
						<view class="index-text" v-if="isRanking">
							<image class="ranking-img"  v-if="index < 3 "  :src="rankImg[index]" mode="widthFix"></image>
							<text class="index-text" v-else>{{index + 1 }}</text>
						</view>
						<!-- 只显示序号 -->
						<view class="index-text" v-else>
							<text>{{index + 1 + startIndex}}</text>
						</view>
					</view>
					
					<view class="box-item-content" 
						v-else-if="val.prop && val.prop != 'image' && val.prop!='merchantScore'"
					>
						{{item[val.prop]}}
					</view>
					<view class="box-item-content-score"
						v-else-if="val.prop && val.prop != 'image' && val.prop=='merchantScore'"
					>
						{{item[val.prop]}}
					</view>
					
					
					
					<view class="box-item-content"
						v-else-if="val.callValue"
					>
						{{val.callValue && val.callValue(item)}}
					</view>
					
					<customTableItem
						class="box-item-content"
						v-else-if="val.render"
						:render="val.render"
						:row="item"
						:index="index"
					></customTableItem>
					
					<!-- <image v-else-if="val.prop == 'image'"
						:src="item[val.src] || defaultAvatar" 
						:style="{width:`${val.widthImage}rpx`}"
						mode="widthFix"
					></image> -->
				</view>
			</view>
			<empty v-show="!dataList.length"></empty>
		</view>
	</view>
</template>

<script>
	import empty from './empty/empty.vue'
	export default {
		components:{
			empty,
			customTableItem:{
				functional: true,
				props: {
					row: Object,
					render: Function,
					index: Number,
				},
				className:"box-item-content",
				render: (h, ctx) => {
					const params = {
						row: ctx.props.row,
						index: ctx.props.index,
					};
					if (ctx.props.column) params.column = ctx.props.column;
					return ctx.props.render(h, params);
				},
			}
		},
		props: {
			// 列属性
			columns: {
				type: Array,
				default: () => []
			},
			// 显示排名
			isRanking: Boolean,
			// 显示序号
			showIndex: Boolean,
			// 表头固定
			isSticky: Boolean,
			rowHeight:{
				type: Number,
				default: 0
			},
			// 从第几个开始显示
			startIndex: {
				type: Number,
				default: 0
			},
			// 行item是否需要圆角
			isRadius:Boolean,
			dataList: {
				type: Array,
				default: () => []
			},
			// defaultAvatar:{
			// 	type:String,
			// 	default:'/static/images/icon/icon_ranking_avatar.png'
			// },
		},
		data() {
			return {
				rankImg: [
					'/static/rank/1.png',
					'/static/rank/2.png',
					'/static/rank/3.png',
				],
				modelData: [],
				rankingBgc:'linear-gradient(90deg,#FFEFBA ,#fffffe)',
				defaultBgc:'linear-gradient(90deg,#e8f3ff  ,#fffffe)',
				// rankingBgc:'',
				// defaultBgc:'',
				sticky:{
					width: '100%',
					position:'sticky',
					top: '0rpx',
					zIndex: 10,
				},
				itemWidth:0,
				isShow:false
			};
		},
		computed:{
			getNewColumns(){
				console.log(this.columns);
				return JSON.parse(JSON.stringify(this.columns))
			},
		},
		watch:{
			dataList(val,oVal) {
				if(!val.length) {
					this.$nextTick(() =>{
						this.isShow = true
					})
				} else {
					this.isShow = false
				}
			},
			getNewColumns(val,oVal){
				if(JSON.stringify(val) !== JSON.stringify(oVal) ) {
					this.getItemWidth()
				}
			},
		},
		mounted() {
			this.getItemWidth()
		},
		methods: {
			itemClick(item){
				this.$emit('itemClick',item)
			},
			getParentWidthInRpx() {
			  // 创建一个 SelectorQuery 对象
			  const query = uni.createSelectorQuery();
			  // 获取当前元素节点
			  const element = query.select('#table-wrap');
			  let parentWidthRpx
			  // 调用 boundingClientRect 方法获取元素位置和大小信息
			  element.boundingClientRect(data => {
			    // 获取设备信息
			    const systemInfo = uni.getSystemInfoSync();
			    // 获取屏幕宽度（单位为 px）
			    const screenWidthPx = systemInfo.screenWidth;
				// console.log(screenWidthPx,'screenWidthPx');
			    // 将 rpx 转换为 px
			    const oneRpxPx = screenWidthPx / 750; // 750 是设计稿宽度
			    // 获取当前元素父级的宽度（单位为 px）
			    const parentWidthPx = data.width;
				console.log(parentWidthPx,'parentWidthPx');
			    // 将父级宽度转换为 rpx
			    parentWidthRpx = parentWidthPx
			  }).exec();
				return parentWidthRpx
			},
			getItemWidth(){
				let widthArr = this.columns.filter(item => item.width)
				let totalWidth = widthArr.reduce((width,pre) => {
					let childWidth =  pre.width || 0
					return width + childWidth
				},0) 
				if(widthArr.length != this.columns.length) {
					let num = this.columns.length - widthArr.length
					let domWidth = this.getParentWidthInRpx()
					this.itemWidth = (domWidth - totalWidth) / num * 2
					console.log(num,domWidth,this.itemWidth,'this.itemWidth');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		box-sizing: border-box;
		width: 100%;
		
	}
	.table-header-wrap{
	}
	.table-wrap{
		// background-color: #fff;
	}
	.table-header-box{
		display: flex;
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		.table-header-item{
			display: flex;
			padding: 20rpx 5rpx;
		}
	}
	
	.table-body-box{
		padding: 10rpx 0;
	}
	
	.table-box-item {
		display: flex;
		background-color: #fff;
		margin-bottom: 14rpx;
		// padding: 20rpx 5rpx;
		align-items: center;
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
		.table-item-box {
			display: flex;
			box-sizing: border-box;
		}

		.item-content-border {
			border-bottom: 1rpx solid #e5e5e5;
		}

		.box-item-content {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			word-break: break-all;
			word-wrap: break-word;
			// font-size: 26rpx;
			font-size: 26rpx;
			.ranking-img {
				width: 60rpx;
			}
		}
		.box-item-content-score {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			word-break: break-all;
			word-wrap: break-word;
			font-size: 26rpx;
			font-weight: bolder;
			.ranking-img {
				width: 60rpx;
			}
		}
		

		.head-column {
			background-color: #4D97FF;
			color: #fff;
		}

		.icon-box {
			background-color: #fff;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 5rpx;
		}

		.column {
			flex-direction: column;
		}


		.item-value {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5rpx;

			.value-img {
				width: 30rpx;
				margin-right: 5rpx;
			}
		}

		.score-value {
			color: #4D97FF;
		}
	}
	
	
	.table-header-item,.box-item-content{
		font-size: 26rpx;
		
	}
</style>